<template>
  <div>
    <div class="block">
      <span class="demonstration">默认</span>
      <el-slider v-model="sliderVal" :step="1" :min="0" :max="4" show-stops></el-slider>
    </div>
    <div class="wrap">
      <div class="img"></div>
      <div class="img"></div>
      <div class="img"></div>
      <div class="img"></div>
      <div class="img"></div>
      <div class="img"></div>
      <div class="img"></div>
      <div class="img"></div>
      <div class="img"></div>
      <div class="img"></div>
      <div class="img"></div>
      <div class="img"></div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        sliderVal: 1,
      };
    },
    mounted() {
      console.log('mounted.');

      window.onresize = () => {
        const clientWidth = document.body.clientWidth;
        const scrollWidth = document.body.scrollWidth;
        const offsetWidth = document.body.offsetWidth;
        const innerWidth = window.innerWidth;
        const viewWidth = window.visualViewport.width;

        console.log('clientWidth:', clientWidth);
        console.log('scrollWidth:', scrollWidth);
        console.log('offsetWidth:', offsetWidth);
        console.log('innerWidth:', innerWidth);
        console.log('viewWidth:', viewWidth);
      };
    },
  };
</script>

<style lang="stylus">
  html,body {
    padding: 0;
    margin: 0;
        overflow: auto
  }


  .block {
    width: 200px;
  }
  .wrap {
    width: 100%;
    background-color: pink;
    height: 200px;


      .img {
      margin-right: 20px;
      display: inline-block;
      width: 200px;
      height: 200px;
      background-color: black;
    }
  }


  // @media only screen and (max-width:1300px){
  //   .wrap {
  //     .img {
  //       width: 32%;
  //     }
  //   }
  // }

  //   @media only screen and (min-width:1301px) and (max-width:1520px){
  //   .wrap {
  //     .img {
  //       width: 24%;
  //     }
  //   }
  // }
</style>
